<script setup>
  import { ref, computed, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { exceptionApi } from '@/apis/task.js'

  // 0. 任务id
  const transportTaskId = ref('')
  onLoad((params) => {
    transportTaskId.value = params.transportTaskId
  })

  // ---------1. 异常时间-begin-----------
  // 异常日期
  const exceptionTime = ref('')
  // ---------1. 异常时间-end-----------

  // ---------2. 异常位置-begin-----------
  const exceptionPlace = ref('')
  // 打开地图
  const onLocationChoose = async () => {
    try {
      const { address } = await uni.chooseLocation({})
      exceptionPlace.value = address
    } catch (e) {
      //TODO handle the exception
    }
  }
  // ---------2. 异常位置-end-----------

  //----------3.异常类型-begin-------------
  const exceptionTypes = reactive([
    { text: '发动机启动困难', checked: false },
    { text: '不着车，漏油', checked: false },
    { text: '照明失灵', checked: false },
    { text: '排烟异常、温度异常', checked: false },
    { text: '其他问题', checked: false },
  ])

  // 组件 ref
  const popup = ref(null)

  // 打开弹层
  const onPopupOpen = () => {
    popup.value.open()
  }

  // 监听用户选择
  const onChangeCheckBox = (index) => {
    // 修改对象中的checked的值
    exceptionTypes[index].checked = !exceptionTypes[index].checked
  }

  // 点击类型弹层确认按钮
  // 发动机启动困难|不着车,漏油|照明失灵
  const exceptionType = ref('')
  const onPopupConfirm = () => {
    popup.value.close()

    // 获取数据
    // const tempArr = exceptionTypes.filter((item) => item.checked)
    // const strArr = tempArr.map((obj) => obj.text)
    // exceptionType.value = strArr.join('|')

    exceptionType.value = exceptionTypes
      .filter((item) => item.checked)
      .map((obj) => obj.text)
      .join('|')
  }
  //----------3.异常类型-end-------------

  // ---------4. 其它-begin--------------------
  // 4.1 异常描述
  const exceptionDescribe = ref('')
  const wordCount = computed(() => exceptionDescribe.value.length)

  // 4.2 异常图片
  const pictureArr = ref([])
  const exceptionImagesList = computed(() => {
    return pictureArr.value.map((item) => {
      return { url: item.url }
    })
  })
  // ---------4. 其它-end，--------------------

  // 5. 上报异常
  const onSubmit = async () => {
    // 5.1 收集数据
    const formData = {
      transportTaskId: transportTaskId.value,
      exceptionTime: exceptionTime.value,
      exceptionPlace: exceptionPlace.value,
      exceptionType: exceptionType.value,
      exceptionDescribe: exceptionDescribe.value,
      exceptionImagesList: exceptionImagesList.value,
    }
    // console.log(formData)
    // 5.2 调用接口
    const { code } = await exceptionApi(formData)
    if (code !== 200) return uni.utils.toast('上报异常失败~')
    uni.reLaunch({
      url: '/pages/task/index',
    })
  }
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <!-- 1. 异常时间-begin -->
          <uni-list-item show-arrow title="异常时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="exceptionTime">
                <view class="picker-value">{{
                  exceptionTime || '请选择'
                }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
          <!-- 1. 异常时间-end -->

          <!-- 2. 异常位置-begin -->
          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :rightText="exceptionPlace || '请选择'"
          />
          <!-- 2. 异常位置-end -->

          <!-- 3. 异常类型-begin -->
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            :rightText="exceptionType || '请选择'"
          />

          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea
                  v-model="exceptionDescribe"
                  class="textarea"
                  placeholder="请输入异常描述"
                ></textarea>
                <view class="words-count">{{ wordCount }}/50</view>
              </view>
            </template>
          </uni-list-item>
          <!-- 3. 异常类型-end -->

          <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
              <uni-file-picker v-model="pictureArr" limit="6"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button class="button disable" @click="onSubmit">提交</button>
    </view>

    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" :mask-click="false" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>
        <uni-list-item
          v-for="(item, index) in exceptionTypes"
          :key="index"
          :title="item.text"
        >
          <template v-slot:footer>
            <checkbox-group class="checkbox" @change="onChangeCheckBox(index)">
              <checkbox color="#EF4F3F" :checked="item.checked" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
